<template>
  <div class="container">
    <div class="jsx1">
        <el-divider content-position="left">测试jsx1</el-divider>
        <jsx1 :id="id1" :arr="arr1"> 我很</jsx1>
        <el-button @click="next1" type="primary">下一个</el-button>
    </div>
    

    <div class="jsx2"> 
        <el-divider content-position="left">测试jsx2模板语法 改变标签</el-divider>
        <jsx2 :id="id2" :arr="arr2"> 我很</jsx2>
        <el-button @click="next2" type="primary">下一个</el-button>
    </div>
  </div>
</template>

<script>
import jsx1 from "./model/jsx1";
import jsx2 from "./model/jsx2";

export default {
  data() {
    return {
      id1: 0,
      arr1:["帅气","屌丝","高傲"],

      id2: 0,
      arr2:[
          "为何辞去原来的工作？",
          "你谈了几个女朋友？",
          "你有几个爸爸？"
        ]
    };
  },
  components: {
    jsx1,
    jsx2
  },
  methods: {
    next1() {
        const $this = this
        if($this.id1>=$this.arr1.length-1){
            $this.id1 = 0
        }else{
            $this.id1++
        }
    },

    next2(){
        const $this = this
        if($this.id2>=$this.arr2.length-1){
            $this.id2 = 0
        }else{
            $this.id2++
        }
    }
  },
};
</script>
<style scoped>
</style>